<template>
  <div class="new-tab-page large parkinglot-wrapper">
    <div class="page-main-title">配置说明<i class="return-icon" @click="back"></i></div>
    <div class="main-content">
      <h4 data-v-14a03b1b="" class="note-title">提示</h4>
      <p class="note-info">
        本说明主要针对两种场中场的区域配置，图中各通道及区域的位置为展示效果，请根据现场真实情况配置。
      </p>

      <div class="tips-item">
        <h3>1. 内场区域与外场无共用通道</h3>
        <div class="tips-bd">
          <img class="img1" src="../../../../assets/img/pic_1.png" alt="" />
          <div class="text">
            <p>配置方法</p>
            <img class="img2" src="../../../../assets/img/pic_arrow.png" alt="" />
          </div>
          <img class="img3" src="../../../../assets/img/pic_3.png" alt="" />
          <img class="img4" src="../../../../assets/img/pic_4.png" alt="" />
        </div>
      </div>

      <div class="tips-item">
        <h3>2. 内场区域与外场有共用通道</h3>
        <div class="tips-bd">
          <img class="img1" src="../../../../assets/img/pic_2.png" alt="" />
          <div class="text">
            <p>配置方法</p>
            <img class="img2" src="../../../../assets/img/pic_arrow.png" alt="" />
          </div>
          <img class="img3" src="../../../../assets/img/pic_5.png" alt="" />
          <img class="img4" src="../../../../assets/img/pic_6.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'editArea_tips',
  methods: {
    back() {
      this.$router.push({
        name: 'areaEdit',
        query: this.$route.query
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../../../assets/less/base/variables.less';
@import '../../../../assets/less/base/newTabPageCommom.less';

.main-content {
  margin: 0 40px;
  margin-top: 20px;
  padding-bottom: 40px;
}

.note-title {
  padding-left: 12px;
  border-left: 4px solid @blue;
  line-height: 16px;
  font-size: 14px;
  color: @grey66;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.note-info {
  line-height: 24px;
  margin-left: 12px;
  color: #666666;
  letter-spacing: 0.4px;
}

.tips-item {
  h3 {
    font-size: 14px;
    color: #333333;
    margin-top: 25px;
    margin-bottom: 20px;
  }

  .tips-bd {
    display: flex;
    align-items: center;
    .text {
      p {
        text-align: center;
      }
    }
    .img1 {
      width: 300px;
    }
    .img2 {
      width: 66px;
      margin: 0 20px;
    }
    .img3 {
      width: 200px;
      margin-right: 20px;
    }
    .img4 {
      width: 200px;
    }
  }
}
</style>
